<template>
  <div>
    <el-button type="success" @click="addManager">新增</el-button>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="id" prop="id"> </el-table-column>
      <el-table-column label="账号" prop="account"> </el-table-column>
      <el-table-column label="密码" prop="password"> </el-table-column>
      <el-table-column label="状态" prop="status"> </el-table-column>

      <el-table-column align="right">
        <!-- 插槽 -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="name"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
       <el-form-item label="状态">
          <el-input v-model="form.status"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <Page :pageTotal="pageInfo.total" @changePage="changePage" @changeSize="changeSize"></Page>
  </div>
</template>

<script>
  import Page from "@/components/page";
  export default {
    data() {
      return {
        dialogVisible: false,
        name:'新增',
        pageInfo:{
          currentPage:1,
          pageSize:3,
          total:0
        },
        //这个是弹窗的表单需要用的数据
        form: {
          id:'',//给编辑使用的id
          account: '',
          password:'',
          status: ''
        },
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        search: "",
      };
    },
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.$axios
          .get("/rbacManager/findAll/"+this.pageInfo.currentPage+"/"+this.pageInfo.pageSize)
          .then((res) => {
            console.log(res);
            if(res.data.code){
              this.tableData = res.data.data.list;
              this.pageInfo.total = res.data.data.total
            }
            
          })
          .catch((err) => {});
      },
      //修改当前页
      changePage(val){
        this.pageInfo.currentPage = val
        this.loadData()
      },
      //修改每天显示条数
      changeSize(val){
        this.pageInfo.pageSize =val
        this.loadData()
      },
      // 新增方法
      addManager() {
        this.dialogVisible = true;
        this.name='新增'
        this.form.id = ''
        this.form.account = ''
        this.form.password = ''
        this.form.status = ''
      },
      //提交新增的表单
       onSubmit() {
         if(this.form.id ==""){
         this.$axios.post("/rbacManager/manager",this.form).then(res=>{
           console.log(res);
           this.dialogVisible = false;
           this.loadData();
         }).catch(err=>{});
         }else{
           this.$axios.put("/rbacManager/manager",this.form)
           .then(res=>{
             console.log(res);
             this.dialogVisible = false;
             this.loadData();
           })
           .catch()
         }
       
      },
      handleEdit(index, row) {
        this.name = '编辑'
        this.dialogVisible = true
        //对弹出框中的内容进行赋值
        this.form.id = row.id
        this.form.account = row.account
        this.form.password = row.password
        this.form.status = row.status
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$axios
          .delete("/rbacManager/manager/" + row.id)
          .then((res) => {
            console.log(res);
            if (res.data > 0) {
              this.loadData();
            }
          })
          .catch();
      },
    },
    components: {
      Page,
    },
  };
</script>